{% block sw_cms_layout_assignment_modal %}
<sw-modal
    :title="$tc('sw-cms.detail.sidebar.titleLayoutAssignment')"
    class="sw-cms-layout-assignment-modal"
    @modal-close="onAbort"
>

    {% block sw_cms_layout_assignment_modal_loader %}
    <sw-loader
        v-if="isLoading"
        class="sw-cms-layout-assignment-modal__loader"
    />
    {% endblock %}

    {% block sw_cms_layout_assignment_modal_info_text_general %}
    <p
        v-if="page.type !== 'page' && page.type !== 'product_detail'"
        class="sw-cms-layout-assignment-modal__info-text"
    >
        {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.infoText') }}
    </p>
    {% endblock %}

    {% block sw_cms_layout_assignment_modal_info_text_shop_pages %}
    <p
        v-if="page.type === 'page'"
        class="sw-cms-layout-assignment-modal__info-text"
    >
        {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.infoTextShopPages') }}
    </p>
    {% endblock %}

    {% block sw_cms_layout_assignment_modal_info_text_product_detail_pages %}
    <p
        v-if="page.type === 'product_detail'"
        class="sw-cms-layout-assignment-modal__info-text"
    >
        {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.infoTextProductDetailPages') }}
    </p>
    {% endblock %}

    {% block sw_cms_layout_assignment_modal_tabs %}
    <sw-tabs
        position-identifier="sw-cms-layout-assignment-modal"
        class="sw-cms-layout-assignment-modal__tabs"
        default-item="categories"
    >

        <template #default="{ active }">
            {% block sw_cms_layout_assignment_modal_tab_categories %}
            <sw-tabs-item
                v-if="page.type === 'page' || page.type === 'landingpage'"
                :active-tab="active"
                :title="$tc('sw-cms.components.cmsLayoutAssignmentModal.tabCategories')"
                class="sw-cms-layout-assignment-modal__tab-categories"
                name="categories"
            >
                {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.tabCategories') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_cms_layout_assignment_modal_tab_shop_pages %}
            <sw-tabs-item
                v-if="page.type === 'page'"
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    showOnDisabledElements: true,
                    disabled: acl.can('system.system_config')
                }"
                :active-tab="active"
                :title="$tc('sw-cms.components.cmsLayoutAssignmentModal.tabShopPages')"
                :disabled="!acl.can('system.system_config')"
                class="sw-cms-layout-assignment-modal__tab-shop-pages"
                name="shop_pages"
            >
                {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.tabShopPages') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_cms_layout_assignment_modal_tab_landing_pages %}
            <sw-tabs-item
                v-if="page.type === 'landingpage'"
                v-tooltip="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    showOnDisabledElements: true,
                    disabled: acl.can('system.system_config')
                }"
                :active-tab="active"
                :title="$tc('sw-cms.components.cmsLayoutAssignmentModal.tabLandingPages')"
                :disabled="!acl.can('system.system_config')"
                class="sw-cms-layout-assignment-modal__tab-landing-pages"
                name="landing_pages"
            >
                {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.tabLandingPages') }}
            </sw-tabs-item>
            {% endblock %}
        </template>

        <template #content="{ active }">
            {% block sw_cms_layout_assignment_modal_landing_page_select %}
            <template v-if="active === 'landing_pages'">

                {% block sw_cms_layout_assignment_modal_landing_page_select_field %}
                <sw-entity-multi-select
                    v-model:entity-collection="page.landingPages"
                    class="sw-cms-layout-assignment-modal__landing-page-select"
                    :label="$tc('global.entities.landing_page')"
                    :placeholder="$tc('sw-cms.components.cmsLayoutAssignmentModal.placeholderLandingPages')"
                    entity-name="landing_page"
                />
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_cms_layout_assignment_modal_category_select %}
            <template v-if="!isProductDetailPage && active === 'categories'">

                {% block sw_cms_layout_assignment_modal_category_select_field %}
                <sw-category-tree-field
                    key="categorySelect"
                    :categories-collection="page.categories"
                    :label="$tc('sw-cms.components.cmsLayoutAssignmentModal.labelCategories')"
                    :placeholder="$tc('sw-cms.components.cmsLayoutAssignmentModal.placeholderCategories')"
                    :page-id="page.id"
                    :is-categories-loading="isCategoriesLoading"
                    class="sw-cms-layout-assignment-modal__category-select"
                    @categories-load-more="onExtraCategories"
                />
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_cms_layout_assignment_modal_shop_pages_select %}
            <template v-if="!isProductDetailPage && active === 'shop_pages'">

                {% block sw_cms_layout_assignment_modal_shop_pages_select_sales_channel_field %}
                <sw-entity-single-select
                    v-model:value="shopPageSalesChannelId"
                    class="sw-cms-layout-assignment-modal__sales-channel-select"
                    entity="sales_channel"
                    :label="$tc('sw-cms.components.cmsLayoutAssignmentModal.labelSalesChannel')"
                    :placeholder="$tc('sw-cms.components.cmsLayoutAssignmentModal.placeholderSalesChannel')"
                    :reset-option="$tc('sw-cms.components.cmsLayoutAssignmentModal.resetOptionSalesChannel')"
                    :help-text="$tc('sw-cms.components.cmsLayoutAssignmentModal.helpTextSalesChannel')"
                    show-clearable-button
                    @update:value="onInputSalesChannelSelect"
                />
                {% endblock %}

                {% block sw_cms_layout_assignment_modal_shop_pages_select_field %}
                <sw-inherit-wrapper
                    v-model:value="selectedShopPages[shopPageSalesChannelId]"
                    :inherited-value="selectedShopPages.null"
                    :has-parent="shopPageSalesChannelId !== null"
                    :label="$tc('sw-cms.components.cmsLayoutAssignmentModal.labelShopPages')"
                >
                    <template #content="props">
                        <sw-multi-select
                            class="sw-cms-layout-assignment-modal__shop-page-select"
                            :options="shopPages"
                            :disabled="props.isInherited"
                            :value="props.currentValue"
                            :map-inheritance="props"
                            @update:value="props.updateCurrentValue"
                        />
                    </template>
                </sw-inherit-wrapper>
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_cms_layout_assignment_modal_product_detail_pages_select %}
            <template v-if="page.type === 'product_detail'">
                {% block sw_entity_many_to_many_assignment_card_select %}
                <sw-cms-product-assignment
                    class="sw-cms-layout-assignment-modal__product-select"
                    :local-mode="true"
                    :entity-collection="page.products"
                    :columns="productColumns"
                    :criteria="productCriteria"
                    :select-label="$tc('sw-cms.components.cmsLayoutAssignmentModal.products.productAssignmentLabel')"
                    :placeholder="$tc('sw-cms.components.cmsLayoutAssignmentModal.products.productAssignmentPlaceholder')"
                >
                    {% block sw_cms_layout_assignment_modal_product_detail_pages_column_name %}
                    <template #column-name="{ item, column }">
                        <router-link
                            :to="{ name: column.routerLink, params: { id: item.id } }"
                        >
                            <sw-product-variant-info
                                :variations="item.options"
                                @click="onAbort"
                            >
                                {{ item.translated.name }}
                            </sw-product-variant-info>
                        </router-link>
                    </template>
                    {% endblock %}

                    {% block sw_cms_layout_assignment_modal_product_detail_pages_column_manufacturer %}
                    <template #column-manufacturer.name="{ item, column }">
                        <router-link
                            v-if="item.manufacturerId"
                            :to="{ name: column.routerLink, params: { id: item.manufacturerId } }"
                        >
                            <p
                                role="button"
                                tabindex="0"
                                @click="onAbort"
                                @keydown.enter="onAbort"
                            >
                                {{ item.manufacturer.translated.name }}
                            </p>
                        </router-link>
                        <span v-else></span>
                    </template>

                    {% endblock %}

                    {% block sw_cms_layout_assignment_modal_product_detail_pages_empty_state %}
                    <template #empty-state>
                        <img
                            class="sw-cms-product-assignment__empty-state"
                            :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                            alt=""
                        >
                        <p>{{ $tc('sw-cms.components.cmsLayoutAssignmentModal.products.productAssignmentEmptyStateDescription') }}</p>
                    </template>
                    {% endblock %}
                </sw-cms-product-assignment>
                {% endblock %}
            </template>
            {% endblock %}

        </template>
    </sw-tabs>
    {% endblock %}

    {% block sw_cms_layout_assignment_modal_confirm_changes %}
    <sw-modal
        v-if="showConfirmChangesModal"
        class="sw-cms-layout-assignment-modal__confirm-changes-modal"
        size="650px"
        :title="$tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTitle')"
        @modal-close="closeConfirmChangesModal"
    >

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_categories %}
        <p
            v-if="hasDeletedCategories"
            class="sw-cms-layout-assignment-modal__confirm-text-categories"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextCategories') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_assigned_layouts %}
        <p
            v-if="hasCategoriesWithAssignedLayouts"
            class="sw-cms-layout-assignment-modal__confirm-text-assigned-layouts"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextCategoriesAssignedLayouts') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_landing_pages %}
        <p
            v-if="hasDeletedLandingPages"
            class="sw-cms-layout-assignment-modal__confirm-text-landing-pages"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextLandingPages') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_assigned_layouts_landing_pages %}
        <p
            v-if="hasLandingPagesWithAssignedLayouts"
            class="sw-cms-layout-assignment-modal__confirm-text-assigned-layouts"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextLandingPagesAssignedLayouts') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_shop_pages %}
        <p
            v-if="hasDeletedShopPages"
            class="sw-cms-layout-assignment-modal__confirm-text-shop-pages"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextShopPages') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_products %}
        <p
            v-if="hasDeletedProducts"
            class="sw-cms-layout-assignment-modal__confirm-text-products"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextProducts') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text_products_assigned_layouts %}
        <p
            v-if="hasProductsWithAssignedLayouts"
            class="sw-cms-layout-assignment-modal__confirm-text-products-assigned-layouts"
        >
            {{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesTextProductsAssignedLayouts') }}
        </p>
        {% endblock %}

        {% block sw_cms_layout_assignment_modal_confirm_changes_text %}
        <p><strong>{{ $tc('sw-cms.components.cmsLayoutAssignmentModal.confirmChangesText') }}</strong></p>
        {% endblock %}

        <template #modal-footer>
            {% block sw_cms_layout_assignment_modal_confirm_changes_keep_editing %}
            <mt-button
                class="sw-cms-layout-assignment-modal__action-keep-editing"
                size="small"
                variant="secondary"
                @click="onKeepEditing"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            <div class="sw-cms-layout-assignment-modal__confirm-changes-modal-main-actions">
                {% block sw_cms_layout_assignment_modal_confirm_changes_discard %}
                <mt-button
                    class="sw-cms-layout-assignment-modal__action-changes-discard"
                    ghost
                    size="small"
                    variant="secondary"
                    @click="onDiscardChanges"
                >
                    {{ $tc('global.default.discard') }}
                </mt-button>
                {% endblock %}

                {% block sw_cms_layout_assignment_modal_confirm_changes_confirm %}
                <mt-button
                    class="sw-cms-layout-assignment-modal__action-changes-confirm"
                    variant="primary"
                    size="small"
                    @click="onConfirmChanges"
                >
                    {{ $tc('global.default.confirm') }}
                </mt-button>
                {% endblock %}
            </div>
        </template>
    </sw-modal>
    {% endblock %}

    {% block sw_cms_layout_assignment_modal_actions %}
    <template #modal-footer>
        {% block sw_cms_layout_assignment_action_abort %}
        <mt-button
            :disabled="isLoading"
            class="sw-cms-layout-assignment-modal__action-cancel"
            size="small"
            variant="secondary"
            @click="onAbort"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_cms_layout_assignment_action_confirm %}
        <mt-button
            :disabled="isLoading"
            class="sw-cms-layout-assignment-modal__action-confirm"
            size="small"
            variant="primary"
            @click="onConfirm"
        >
            {{ $tc('global.default.apply') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
